<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style type="text/css">
        .border {
            border: solid 1px #ff8adf;
            height: 50px
        }

        .input_item {
            /*text-align: center;*/
            padding-top: 5px
        }
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

<div class="layui-container1 layui-fluid " id="core_table" v-cloak>
    <form class="layui-form">
        <div class="layui-row">
            <div class="layui-col-md3 layui-col-lg6  input_item">
                <div class="layui-form-item">
                    <label class="layui-form-label">测试：</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verType="tips" required lay-verify="required|Age"
                               placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3  layui-col-lg6 input_item">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名：</label>
                    <div class="layui-input-block">
                        <input type="text" name="Testtitle" lay-verType="tips" required lay-verify="required"
                               placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-col-md12  layui-col-lg12 input_item" v-if="count_num>10">
                <div class="layui-form-item">
                    <label class="layui-form-label">程序：</label>
                    <div class="layui-input-block">
                        <input type="text" name="Testtitl1e" lay-verType="tips" required lay-verify="required"
                               placeholder="请输入程序程序程序程序标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-col-md3  layui-col-lg6 input_item">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名：</label>
                    <div class="layui-input-block">
                        <select name="city" class="layui-input" lay-verify="required">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3  layui-col-lg6 input_item">
                <div class="layui-form-item">
                    <label class="layui-form-label">复选框</label>
                    <div class="layui-input-block">
                        <input type="checkbox" lay-verify="required" name="like[write]" title="写作">
                        <input type="checkbox" lay-verify="required" name="like[read]" title="阅读" checked>
                        <input type="checkbox" lay-verify="required" name="like[dai]" title="发呆">
                    </div>
                </div>
            </div>

            <div class="layui-col-md12 layui-col-sm12">
                <div class="layui-tab layui-tab-card">
                    <ul class="layui-tab-title">
                        <li class="layui-this">网站设置</li>
                        <li>用户管理</li>
                        <li>权限分配</li>
                        <li>商品管理</li>
                        <li>订单管理</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">内容1</div>
                        <div class="layui-tab-item">
                            <div class="layui-fluid">
                                <div class="layui-row">
                                    <div class="layui-col-md3  layui-col-lg6 input_item">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">姓名：</label>
                                            <div class="layui-input-block">
                                                <select name="city" lay-verify="required">
                                                    <option value=""></option>
                                                    <option value="0">北京</option>
                                                    <option value="1">上海</option>
                                                    <option value="2">广州</option>
                                                    <option value="3">深圳</option>
                                                    <option value="4">杭州</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-col-md3  layui-col-lg6 input_item">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">姓名：</label>
                                            <div class="layui-input-block">
                                                <select name="city" lay-verify="required">
                                                    <option value=""></option>
                                                    <option value="0">北京</option>
                                                    <option value="1">上海</option>
                                                    <option value="2">广州</option>
                                                    <option value="3">深圳</option>
                                                    <option value="4">杭州</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">内容3</div>
                        <div class="layui-tab-item">内容4</div>
                        <div class="layui-tab-item">内容5</div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md12 border"
                 style="text-align: center;padding-top: 5px;min-height: 500px; line-height: 100px">
                <button class="layui-btn layui-btn-danger " @click="add_num" type="button" lay-submit lay-filter="postData">提交数据</button>
                <button class="layui-btn layui-btn-primary" @click="count_num++" type="button" >Add Data Sum <span  class="layui-badge">{{count_num}}</span></button>
            </div>
        </div>
    </form>
    <br/>
    <div class="layui-row" style="margin-top: 110">
        <div class="layui-col-md2 layui-col-xs2 " style="min-height: 600px;border: solid 1px red">

        </div>
        <div class="layui-col-md5  layui-col-xs5" style="min-height: 600px;border: solid 1px red">

        </div>
        <div class="layui-col-md5  layui-col-xs5" style="min-height: 600px;border: solid 1px red">

        </div>
    </div>
</div>
<script src="http://f.weizhi.so/static/vendor/js/jquery.min.js?v=2.1.4"></script>
<script src="./layui/layui.all.js" charset="utf-8"></script>
<script src="http://c3.jsxfang.com/vue/vue.min.js"></script>
<script src="http://c3.jsxfang.com/vue/vue-resource.min.js"></script>

<script>
    layui.form.verify({
        Age: function (value, item) {
            //return "测试:"+value
        }
    })
    var  data  =new Vue({
        el:"#core_table",
        data:{
            count_num:1
        },methods:{
            add_num:function () {
                this.count_num++;
            }
        },created:function (d) {
            console.info("data console")
        }
    })
    layui.form.on('submit(postData)', function (data) {

    })
    layui.form.render()
</script>

</body>
</html>